<template>
	<view class="container">
	<!-- 侧边导航栏 -->
	<scroll-view class="left">
	<van-sidebar active-key="0">
		<van-sidebar-item v-for="item in data.cates" :title="item.title" @click="methods.getContentById(item.id)" />
	</van-sidebar>
	</scroll-view>
	
	<!-- 内容显示区域 -->
	<scroll-view class="right">
		<view v-for="item in data.images" class="img-box">
			<van-image
			width="10rem"
			height="10rem"
			:src="item.img_url" use-error-slot @click="methods.previewImg(item.img_url)">
			<text slot="error">加载失败</text>
			</van-image>
			<view class="title">{{item.title}}</view>
		</view>
		
		<van-empty image="error" v-if="data.images.length == 0" description="空空如也" />
	</scroll-view>
	
	</view>
</template>

<script setup>
import { reactive } from "vue";
import { onShow, onHide, onLoad, onReachBottom, onPullDownRefresh,} from "@dcloudio/uni-app"
import {apiRequest} from '../../utils/apiRequest.js'
const data = reactive({
	cates:[],
	images:[]
})
const methods = {
	getPicsCate(){
		apiRequest({
			url:'/api/getimgcategory'
		}).then(res => {
			data.cates = res.data.message
		}) 
	},
	
	// 通过id获取右侧内容
	getContentById(id){
		apiRequest({
			url:'/api/getimages/' + id
		}).then(res => {
			
			data.images = res.data.message
			console.log(data.images)
		})
	},
	// 图片预览
	previewImg(current){
		const urls = data.images.map( item => {
			return item.img_url
		})
		// uniapp图片预览
		uni.previewImage({
			current,
			urls
		})
	}
}

onLoad(() => {
	methods.getPicsCate()
})
</script>

<style lang="scss">
.container{
	display: flex;
	justify-content: space-between;
	.left{
		width: 19%;
	}
	.right{
		width:79%;
		padding-left:5rpx;
		
		.img-box{
			margin:20rpx 5rpx;
			border: 1px solid #CDCDCD;
		}
	}
}
</style>
